<template>
  <div class="cases-list">
    <el-row :gutter="30">
      <el-col 
        v-for="item in casesList" 
        :key="item.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <div class="case-card" @click="showDetail(item)">
          <div class="card-image">
            <img :src="item.image" :alt="item.title">
            <div class="image-overlay">
              <el-icon><ZoomIn /></el-icon>
            </div>
          </div>
          <div class="card-content">
            <h3 class="title">{{ item.title }}</h3>
            <p class="description">{{ item.description }}</p>
            <div class="tags">
              <el-tag size="small" type="info">{{ item.industry }}</el-tag>
              <el-tag size="small" type="success">{{ item.solution }}</el-tag>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 分页器 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[8, 12, 16, 24]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentCase?.title"
      width="70%"
      class="case-dialog"
    >
      <div v-if="currentCase" class="case-detail">
        <div class="detail-header">
          <img :src="currentCase.image" class="detail-image">
          <div class="header-content">
            <h2>{{ currentCase.title }}</h2>
            <div class="meta-info">
              <span class="industry">
                <el-icon><House /></el-icon>
                {{ currentCase.industry }}
              </span>
              <span class="time">
                <el-icon><Calendar /></el-icon>
                {{ currentCase.implementTime }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="section">
            <h3>项目背景</h3>
            <p>{{ currentCase.description }}</p>
          </div>
          
          <div class="section">
            <h3>解决方案</h3>
            <p>{{ currentCase.solution }}</p>
          </div>
          
          <div class="section">
            <h3>实施效果</h3>
            <p>{{ currentCase.results }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCaseList } from '@/api/cases'
import { ZoomIn, House, Calendar } from '@element-plus/icons-vue'

// 数据状态
const loading = ref(false)
const casesList = ref([])
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
const filterParams = ref({})

// 详情对话框
const dialogVisible = ref(false)
const currentCase = ref(null)

// 获取案例列表数据
const fetchCasesList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      ...filterParams.value
    }
    const res = await getCaseList(params)
    casesList.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    console.error('获取案例列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理筛选条件变化
const handleFilterChange = (filters) => {
  filterParams.value = filters
  currentPage.value = 1
  fetchCasesList()
}

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchCasesList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchCasesList()
}

// 显示详情
const showDetail = (item) => {
  currentCase.value = item
  dialogVisible.value = true
}

// 暴露方法给父组件
defineExpose({
  handleFilterChange,
  fetchCasesList
})

// 初始化
onMounted(() => {
  fetchCasesList()
})
</script>

<style lang="scss" scoped>
.cases-list {
  .case-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      
      .card-image {
        .image-overlay {
          opacity: 1;
        }
      }
    }
    
    .card-image {
      position: relative;
      height: 200px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
      }
      
      .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 107, 107, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s ease;
        
        .el-icon {
          font-size: 30px;
          color: #fff;
        }
      }
    }
    
    .card-content {
      padding: 20px;
      
      .title {
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0 0 10px;
        line-height: 1.4;
      }
      
      .description {
        font-size: 14px;
        color: #606266;
        margin: 0 0 15px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .tags {
        display: flex;
        gap: 10px;
        
        .el-tag {
          border-radius: 4px;
        }
      }
    }
  }
  
  .pagination-container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    
    :deep(.el-pagination) {
      .el-pagination__total,
      .el-pagination__sizes {
        margin-right: 20px;
      }
      
      .el-pager li,
      .btn-prev,
      .btn-next {
        background: #fff;
        border-radius: 8px;
        margin: 0 5px;
        
        &:hover,
        &.is-active {
          color: #ff6b6b;
        }
        
        &.is-active {
          background: #fff4f4;
        }
      }
    }
  }
}

.case-dialog {
  :deep(.el-dialog__header) {
    padding: 0;
    margin: 0;
    
    .el-dialog__title {
      display: none;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
  }
  
  .case-detail {
    .detail-header {
      position: relative;
      
      .detail-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }
      
      .header-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 30px;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        color: #fff;
        
        h2 {
          font-size: 28px;
          font-weight: 600;
          margin: 0 0 15px;
        }
        
        .meta-info {
          display: flex;
          gap: 20px;
          font-size: 14px;
          
          span {
            display: flex;
            align-items: center;
            gap: 5px;
            
            .el-icon {
              font-size: 16px;
            }
          }
        }
      }
    }
    
    .detail-content {
      padding: 30px;
      
      .section {
        margin-bottom: 30px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        h3 {
          font-size: 20px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0 0 15px;
          padding-left: 15px;
          border-left: 4px solid #ff6b6b;
        }
        
        p {
          font-size: 15px;
          color: #606266;
          line-height: 1.8;
          margin: 0;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .cases-list {
    .case-card {
      margin-bottom: 20px;
      
      .card-image {
        height: 180px;
      }
      
      .card-content {
        padding: 15px;
        
        .title {
          font-size: 16px;
        }
      }
    }
  }
  
  .case-dialog {
    .case-detail {
      .detail-header {
        .detail-image {
          height: 200px;
        }
        
        .header-content {
          padding: 20px;
          
          h2 {
            font-size: 22px;
            margin-bottom: 10px;
          }
        }
      }
      
      .detail-content {
        padding: 20px;
        
        .section {
          margin-bottom: 25px;
          
          h3 {
            font-size: 18px;
          }
          
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style> 